<template>
    <div class="home">
        <Header :check="0" />
        <!-- <Banner /> -->
        <div class="home-page">

            <!-- Banner -->
            <div class="home-banner">
                <div class="swiper banner-swiper">
                    <div class="swiper-wrapper">
                        <div v-for="(item, index) in  3" :key="index" class="swiper-slide">
                            <div class="banner-item flex-center">
                                <img class="banner-bg" src="@/assets/images/banner_01.jpg" alt="">
                                <div class="container">
                                    <!-- <div class="banner-main">
                                        <div class="tt">中国住房金融服务领域</div>
                                        <div class="tt">中国住房金融服务领域</div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination banner-pagination"></div>
                </div>

            </div>
            <!-- Banner -->


            <div class="home-fourbox">
                <div class="container">
                    <div class="fourbox-main">
                        <div v-for="(item, index) in fourbox_arr" :key="index" class="fourbox-item">
                            <div class="fourbox-pic">
                                <img class="fourbox-img" :src="item.imgurl" alt="">
                            </div>
                            <div class="fourbox-cont">
                                <div class="tt">
                                    {{ item.title }}
                                </div>
                                <div class="dd">
                                    {{ item.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 热门产品 -->

            <div class="home-hotbox">
                <div class="container">
                    <div class="hotbox-main">
                        <div class="hotbox-tt">
                            热门产品及服务
                        </div>
                        <div class="hotbox-dd">
                            热门推荐最新上线合规运营的场景化服务系统
                        </div>
                        <div class="hotbox-list">
                            <div v-for="(item, index) in hotbox_arr" :key="index" class="hotbox-item">
                                <div class="tt">
                                    {{ item.title }}
                                </div>
                                <div class="dd">
                                    {{ item.desc }}
                                </div>
                                <div class="taglist">
                                    <div v-for="(vitem, vindex) in item.taglist" :key="vindex" class="tag flex-center">
                                        {{ vitem }}
                                    </div>
                                </div>
                                <div class="btn flex-center">
                                    立即使用
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门产品 -->


            <!-- 服务 -->
            <div class="home-service">
                <div class="container">
                    <div class="service-main">
                        <div class="service-tt">
                            丰富安全业务产品及服务
                        </div>
                        <div class="service-dd">
                            专注金融科技，中国领先的住房金融科技服务商
                        </div>

                        <div class="service-cont">
                            <div class="service-vleft">
                                <img class="service-pic" src="@/assets/images/product_pic.jpg" alt="">
                                <div class="vleft-title">
                                    项目分类
                                </div>
                            </div>
                            <div class="service-vright">
                                <div v-for="(item, index) in service_arr" :key="index" class="service-item">
                                    <div class="tt">
                                        {{ item.title }}
                                    </div>
                                    <div class="dd">
                                        <div>
                                            {{ item.desc }}
                                        </div>
                                    </div>
                                    <div class="btn flex-center">
                                        立即使用
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 服务 -->


            <!-- 解决方案 -->
            <div class="home-solution">
                <div class="solution-container">
                    <div class="solution-main">
                        <div class="solution-tt">
                            服务住房金融行业的全栈解决方案
                        </div>
                        <div class="solution-dd">
                            “与用户共赢共生”的经营理念，为合伙人创造机会，成为中国领先的创新型金融科技服务平台
                        </div>
                        <div class="solution-cont">
                            <div class="swiper-button-prev solution-button-prev"></div>

                            <div class="swiper solution-swiper">
                                <div class="swiper-wrapper">
                                    <div v-for="(item, index) in solution_arr" :key="index" class="swiper-slide">
                                        <div class="solution-item">
                                            <div class="solution-pic">
                                                <div class="pic-box">
                                                    <img class="img" :src="item.imgurl" alt="">
                                                </div>
                                            </div>
                                            <div class="solution-text">
                                                {{ item.title }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="swiper-button-next solution-button-next"></div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 解决方案 -->

            <!-- 关于我们 -->
            <div class="home-about">
                <div class="container">
                    <div class="about-main">
                        <div class="about-tt">
                            关于我们
                        </div>
                        <div class="about-dd">
                            深圳市耘融易互联网有限公司简介
                        </div>
                        <div class="about-cont">
                            <div class="about-vleft">
                                <div class="cont">
                                    深圳市耘融易互联网有限公司简介，指一定时期内实体经济从金融体系获得的资金总额。
                                    主要包括：人民币贷款、外币贷款（折合人民币）、委托贷款、信托贷款、未贴现的银行承兑汇票、
                                    企业债券、地方政府专项债券、非金融企业境内股票融资、投资性房地产、保险公司赔偿等社会融资规模存量
                                    指一定时期末（月末、季末或年末）实体经济从金融体系获得的资金余额。主要包括：人民币贷款、外币贷款（折合人民币）、
                                    委托贷款、信托贷款、未贴现的银行承兑汇票、企业债券、地方政府专项债券、非金融企业境内股票融资、投资性房地产、
                                    保险公司赔偿等。
                                </div>
                                <div class="btn flex-center">
                                    更多
                                </div>
                            </div>
                            <div class="about-vright">
                                <div class="about-pic">
                                    <div class="pic-box">
                                        <img class="img" src="@/assets/images/bg.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 关于我们 -->

            <!-- 合作伙伴 -->
            <div class="home-client">
                <div class="container">
                    <div class="client-main">
                        <div class="client-tt">
                            合作伙伴
                        </div>
                        <div class="client-dd">
                            合作共赢，持续助力合作伙伴
                        </div>
                        <div class="client-list">
                            <div v-for="(item, index) in client_arr" :key="index" class="client-item">
                                <div class="client-pic">
                                    <div class="pic-box">
                                        <img class="img" :src="item.imgurl" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 合作伙伴 -->


            <!-- 联系我们 -->
            <div class="home-contact">
                <div class="container">
                    <div class="contact-main">
                        <div class="contact-text">
                            期待与您合作
                        </div>
                        <div class="contact-btn flex-center">
                            联系我们
                        </div>
                    </div>
                </div>
            </div>
            <!-- 联系我们 -->




            <!-- <div class="home-box">
            <div class="container">
                <div class="box-main">
                    <div class="swiper box-swiper">
                        <div class="swiper-wrapper">
                            <div v-for="(item, index) in 6" :key="index" class="swiper-slide">
                                <div class="box-item"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->




        </div>
        <Footer />
    </div>
</template>

<script setup>
import Swiper from "swiper";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";


// 图片

import img_v1 from "@/assets/images/icon_computer.png";
import img_v2 from "@/assets/images/icon_protect.png";
import img_v3 from "@/assets/images/icon_data.png";
import img_v4 from "@/assets/images/icon_money.png";

import img_v5 from "@/assets/images/banner_01.jpg";

import img_v6 from "@/assets/images/logo.jpg";


const data = reactive({
    fourbox_arr: [
        {
            imgurl: img_v1,
            title: '科技优势',
            desc: '创新金融，定制化开发'
        },
        {
            imgurl: img_v2,
            title: '风控优势',
            desc: '智能风控，标准化输出'
        },
        {
            imgurl: img_v3,
            title: '数据优势',
            desc: '独家、全面、合规'
        },
        {
            imgurl: img_v4,
            title: '资金优势',
            desc: '多元化资金来源'
        }
    ],
    hotbox_arr: [
        {
            title: '点金通',
            desc: '多元化牌照输出',
            taglist: [
                '合法合规',
                '资金安全',
                '实时到账'
            ]
        },
        {
            title: '点金通',
            desc: '多元化牌照输出',
            taglist: [
                '合法合规',
                '资金安全',
                '实时到账'
            ]
        },
        {
            title: '点金通',
            desc: '多元化牌照输出',
            taglist: [
                '合法合规',
                '资金安全',
                '实时到账'
            ]
        },
        {
            title: '点金通',
            desc: '多元化牌照输出',
            taglist: [
                '合法合规',
                '资金安全',
                '实时到账'
            ]
        }
    ],
    service_arr: [
        {
            title: '点金税',
            desc: '为企业提供一站式灵活用工结算案，帮助企业降本增效、合规经营'
        },
        {
            title: '点金税',
            desc: '为企业提供一站式灵活用工结算案，帮助企业降本增效、合规经营'
        },
        {
            title: '点金税',
            desc: '为企业提供一站式灵活用工结算案，帮助企业降本增效、合规经营'
        },
        {
            title: '点金税',
            desc: '为企业提供一站式灵活用工结算案，帮助企业降本增效、合规经营'
        },
        {
            title: '点金税',
            desc: '为企业提供一站式灵活用工结算案，帮助企业降本增效、合规经营'
        },
        {
            title: '点金税',
            desc: '为企业提供一站式灵活用工结算案，帮助企业降本增效、合规经营'
        }
    ],
    solution_arr: [
        {
            imgurl: img_v5,
            title: '科技优势',
        },
        {
            imgurl: img_v5,
            title: '科技优势',
        },
        {
            imgurl: img_v5,
            title: '科技优势',
        },
        {
            imgurl: img_v5,
            title: '科技优势',
        }
    ],
    client_arr: [
        {
            imgurl: img_v6,
            title: '客户名称',
        },
        {
            imgurl: img_v6,
            title: '客户名称',
        },
        {
            imgurl: img_v6,
            title: '客户名称',
        },
        {
            imgurl: img_v6,
            title: '客户名称',
        },
        {
            imgurl: img_v6,
            title: '客户名称',
        },
        {
            imgurl: img_v6,
            title: '客户名称',
        },
        {
            imgurl: img_v6,
            title: '客户名称',
        }, {
            imgurl: img_v6,
            title: '客户名称',
        },
        {
            imgurl: img_v6,
            title: '客户名称',
        }, {
            imgurl: img_v6,
            title: '客户名称',
        },
    ],
    swiper_banner: null,
    swiper_1: null,

});


const { fourbox_arr, hotbox_arr, service_arr, solution_arr, client_arr, swiper_banner, swiper_1 } = toRefs(data);




function initswier() {
    swiper_banner.value = new Swiper(".banner-swiper", {
        pagination: {
            el: ".swiper-pagination"
        },
    });
    swiper_1.value = new Swiper(".solution-swiper", {
        slidesPerView: 3,
        spaceBetween: 30,
        navigation: {
            nextEl: ".solution-button-next",
            prevEl: ".solution-button-prev",
        },
        // Swiper的配置选项
        // 例如：slidesPerView, navigation, pagination等
    });
}

initswier();
</script>
